// 路由鉴权
// 1. 判断token是否存在
// 2. 如果存在 直接正常渲染
// 3. 如果不存在 重定向到登录路由

import {Navigate} from "react-router-dom";
import react from "react";
import {getToken} from '@/utils'
import {IRouter} from "./route.tsx";
// 高阶组件:把一个组件当成另外一个组件的参数传入 然后通过一定的判断 返回新的组件
// 这里的AuthRoute就是一个高阶组件

interface IProps {
    children?: react.ReactNode,
    item?: IRouter
}

function AuthRoute({children}: IProps) {
    // useEffect监控路由 可以异步操作路由，实现鉴权路由守卫 操作空间留给自己
    // 获取token
    const tokenStr = getToken()
    // 如果token存在 直接正常渲染
    if (tokenStr) {
        return <>{children}</>
    }
    // 如果token不存在，重定向到登录路由
    else {
        return <Navigate to='/login' replace/>
    }
}


{/*
 <AuthRoute> <Layout /> </AuthRoute>
 登录：<> <Layout /> </>
 非登录：<Navigate to="/login" replace />
*/
}
export {AuthRoute}